<!--
 * 用户购买首页
 *
 * @Author: ShanZhu
 * @Date: 2024-01-24
-->
<template>
  <div>
    <!--   操作面板   -->
    <el-card class="goods-card">
      <div>
        <el-input v-model="param.searchKey" style="width: 240px" @keyup.enter.native="refresh(1)"
                  placeholder="内容"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="refresh(1)">搜索</el-button>
      </div>
    </el-card>
    <el-card class="main-card">
      <el-row>
        <el-col :span="8" v-for="(o, index) in list" :key="o" :offset="0.1">
          <el-card style="padding:0px;margin:2px">
            <img :src="list[index].img_guid">
            <div style="padding: 14px;">
              <div>
                <el-tag>{{list[index].name}}</el-tag>
                <br><br>
                <span style="font-size: 20px;">价格：</span><span style="color: #ff6a00;font-size: 20px;">￥{{list[index].price}}</span>

              </div>

              <br>
              <div style="color: #d39696">{{list[index].detail}}</div>

              <div class="bottom clearfix">
                <el-button class="button button-add-cart" icon="el-icon-shopping-cart-1" type="success"
                           @click="addCart(list[index])">购买</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!--   分页  -->
      <div>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="pagination.total"
          :page-size="pagination.pageSize"
          :current-page="pagination.currentPage"
          @current-change="pageChange">
        </el-pagination>
      </div>
    </el-card>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        types: [],
        param: {
          page: 1,
          searchKey: '',
          searchType: '',
        },
        addParam: {
          fid: 1,
          flower: '',
          account: window.sessionStorage.getItem("token"),
        },
        list: [],
        pagination: {
          total: 1,
          pageSize: 9,
          currentPage: 1,
        },
      }
    },
    methods: {

      pageChange(page) {
        this.refresh(page);
      },
      addCart(flower) {
        this.addParam.fid = flower.id;
        this.addParam.flower = flower.name;
        console.log(this.addParam)
        this.$http.post("/cart/create", this.addParam).then(result => {
          let R = result.data; // R
          if (R.code === 2000) {
            this.$message.success(R.msg);
          } else {
            this.$message.error(R.msg);
          }
        });
      },
      refresh(page) {
        if (page === undefined) {
          page = 1;
        }
        //window.sessionStorage.getItem('token')
        this.$http.get("/flower/find?page=" + page + "&searchKey=" + this.param.searchKey
          + "&searchType=" + this.param.searchType
        ).then(result => {
          let R = result.data;
          this.list = R.data.items;
          console.log(this.list);
          this.pagination.total = R.data.len;
          this.pagination.currentPage = page;
        })
      },
    },
    created() {
      this.refresh(1);
    }
  }
</script>

<style scoped>
  .search-input {
    width: 300px;
  }


  .updateForm {
    width: 80%;
  }

  .btn-release {
    float: right;
    margin-top: 10px;
    margin-right: 50px;
  }

  .form-releaseTask {
    height: 300px;
  }

  .input-content-task {
    width: 500px;
  }

  img {
    margin-top: 10px;
    width: 160px;
    height: 160px;
  }

  .main-card {
    background: #B3C0D1;
  }

  .button-add-cart {
    float: right;
    margin: 5px;
  }
</style>
